<template>
    <div ref="cozeChatContainer" class="coze-chat-container"></div>
  </template>
  
  <script setup lang="ts">
  import { onMounted, ref } from 'vue';
  
  const props = defineProps<{
    botId: string;
    token: string;
  }>();
  
  const cozeChatContainer = ref<HTMLElement>();
  
  onMounted(() => {
    const script = document.createElement('script');
    script.src = "https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.2/libs/cn/index.js";
    script.onload = () => {
      new CozeWebSDK.WebChatClient({
        config: {
          bot_id: props.botId,
        },
        componentProps: {
          title: 'Coze',
        },
        auth: {
          type: 'token',
          token: props.token,
          onRefreshToken: function () {
            return props.token; // 这里可以实现 token 刷新逻辑
          }
        }
      });
    };
    document.body.appendChild(script);
  });
  </script>
  
  <style scoped>
  .coze-chat-container {
    width: 100%;
    height: 500px; /* 根据需要调整高度 */
  }
  </style>